<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>合约仓库</title>
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../../../content/pc/sysmgt/blockchainManagement/style/style1.css">
    <style>
        .detail-container{
            width:100%;
            height:100%;
            padding: 6px 20px;
        }
        .inform-p{
            height: 26px;
            line-height: 26px;
            display: flex;
        }
        .inform-p span:first-child {
            font-size: 12px;
            width: 120px;
        }
        .inform-p span{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            height: 26px;
            line-height: 26px;
        }
        .inform-p span:nth-child(2){
            flex: 1;
        }
        #addNew-template .layui-layer-content{
            height: 400px!important;
        }
        #online-preview .preview-iframe{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="center">
    <div class="tbox">
        合约仓库中提供常用的工具合约和推荐应用合约模板。用户可将合约导入到自己目录进行引入。
    </div>
    #if(recordList!=null)
        #for(x:recordList)
            <div class="list">
                <div class="img">
                    <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/1.png" alt="">
                </div>
                <div class="tit">
                    <p title="#(x.get('attrib_04'))">#(x.get("attrib_03"))(#(x.get("attrib_04")))</p>
                    <p title="#(x.get('attrib_12'))">#(x.get("attrib_12"))</p>
                    <div class="btnContarcts">
                        <!-- <a onclick="detailFun(this)" data-title="#(x.get('conflict_id'))">下载</a> -->
                        <!-- <a href="#(x.get('attrib_06'))" target="downloadFile" download>下载</a> -->
                        <a onclick="downLoadFun(this)" data-title="#(x.get('attrib_06'))">查看</a>
                        <a href="#(x.get('attrib_06'))" download="预览文件" target="_blank">下载</a>
                    </div>
                </div>
            </div>
        #end
    #end
    <!-- <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/2.png" alt="">
        </div>
        <div class="tit">
            <p>存证应用</p>
            <p>一套区块链存证合约，实现区块链存证、取证</p>
            <div class="btn"><a href="">导出到IDE</a><a href="">预约和说明</a></div>
        </div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/3.png" alt="">
        </div>
        <div class="tit">
            <p>积分应用</p>
            <p>一套积分合约，员有积分相关的增发，销级，暂停合约，黑白名单等权模控制等功能</p>
            <div class="btn"><a href="">导出到IDE</a><a href="">预约和说明</a></div>
        </div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/2.png" alt="">
        </div>
        <div class="tit">
            <p>SmartDev存证应用</p>
            <p>Smart-Dev-Contracts仓库中的存证应用模板</p>
            <div class="btn"><a href="">导出到IDE</a><a href="">预约和说明</a></div>
        </div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/2.png" alt="">
        </div>
        <div class="tit">
            <p>资产应用</p>
            <p>一套非同质化资产合约，具有于唯一性资产类型，如房产、汽车、道员、版权等</p>
            <div class="btn"><a href="">导出到IDE</a><a href="">预约和说明</a></div>
        </div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/2.png" alt="">
        </div>
        <div class="tit">
            <p>SmartDev存证应用</p>
            <p>Smart-Dev-Contracts仓库中的存证应用模板</p>
            <div class="btn"><a href="">导出到IDE</a><a href="">预约和说明</a></div>
        </div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../../../../../content/pc/sysmgt/blockchainManagement/images/4.png" alt="">
        </div>
        <div class="tit">

            <p>应用开发中，敬请期待...</p>

        </div>
    </div> -->
    <!-- <input id="fileInput" style="width: 0; height: 0;opacity: 0"  type="file" accept=".go" multiple style="display: none"> -->
</div>
<script src="../../../../../lib/jquery/jquery.min.js"></script>
<script src="../../../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../../../../lib/ui/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../../../../../lib/layui/layui.all.js"></script>
<script type="text/template" id="detail-template">
    <div class="detail-container" id="detail-conatiner">
    </div>
</script>
<script type="text/template" id="online-preview">
    <div id="preview-iframe">
        <pre id="show-txt"></pre>
    </div>
</script>
<script>
    function detailFun(e){
        layer.open({
                type: 1, //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
                title :'查看详情',
                area: ['30%', '500px'],
                content:$('#detail-template').html(), //这里content是一个普通的String
                btn: ['关闭'],
                yes: function(index, layero){
                    layer.close(index);
                },
            });
            // //初始化***
            layer.ready(function(){
                $('#detail-conatiner').empty();
                $.post("/sysadmin/remoteApp/selectFormDataByCid",{"cid":$(e).attr('data-title')},function(result){
                    result.forEach((item,index)=>{
                        let itemValue=item.value;
                        if(itemValue==null){
                            itemValue='';
                        }
                        $('#detail-conatiner').append("<p class='inform-p'><span>"+item.name+"：</span><span>"+itemValue+"</span></p>");
                    });
                },"json");
            });
    }
    function downLoadFun(e){
        $('#online-preview').attr('data-title',$(e).attr('data-title'));
        layer.open({
            type: 1, //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
            title :'下载预览',
            area: ['80%', '500px'],
            content:$('#online-preview').html(), //这里content是一个普通的String
            btn: ['关闭'],
            // yes: function(index, layero){
            //     layer.close(index);
            // },
        });
        //初始化
        layer.ready(function(){
            let  filePath = $(e).attr('data-title');
            fetch(filePath)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.text();
            })
            .then(data => {
                $('#preview-iframe #show-txt').text(data);
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
        });
    }
</script>
</body>
</html>